<script setup>
const prop = defineProps([
	"data",
	"info"
])
</script>

<template>
<view class="home-card">
  <view class="device">
    <view>补货设备：<span class="num red">{{info?.replenishMachines || 0 }}</span></view>
    <view class="line" />
    <view>在线数量：<span class="num green">{{ info?.inlineMachines || 0 }}</span></view>
    <view class="line" />
    <view>离线设备：<span class="num orange">{{ info?.offlineMachines || 0 }}</span></view>
  </view>
</view>
</template>

<style scoped lang='scss'>
.home-card {
  width: 686rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  margin: 80rpx auto 24rpx auto;
  padding: 36rpx 0;
	box-sizing: border-box;
  z-index: 1;
  position: relative;
}
.device {
  width: 648rpx;
  height: 84rpx;
  line-height: 84rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16rpx;
  box-sizing: border-box;
  background: #FDF8F8;
  border-radius: 16rpx;
  margin: 0 auto;
  font-size: 30rpx;
}
.line {
  width: 4rpx;
  height: 28rpx;
  background: #D8D8D8;
}
.num {
  font-weight: bold;
  &.red {
    color: var(--main-color);
  }
  &.green {
    color: #25DFA5;
  }
  &.orange {
    color: #FF776A;
  }
}
</style>